<template>
  <div
      :class="[props.noborder?'noborder':'', props.borderBottom ? 'bt':'',nobd?'noborder':'',money?'money':'' ]">
    <div v-if="!props.disabled" >
      <tiny-input
        ref="ltextRef"
        style="color: red"
        v-model="vals"
        :type="props.type"
        :size="props.size"
        :clearable="props.clearable"
        :placeholder="props.placeholder"
        :disabled="props.disabled"
        :digits="props.digit"
        :show-password="props.showPassword"
        :maxlength="props.maxlength"
        :minlength="props.minlength"
        :autofocus="props.autofocus"
        :readonly="readonly"
        :rows="props.rows"
        :input-style="inputStyle"
        @clear="clear"
        @keydown="keydownEvent"
        @change="change"
        @focus="toFocus"
        @blur="blur"
        v-bind="$attrs"
      >
      </tiny-input>
    </div>
    <div :class="[money?'money':'']" class="readonly " v-else >
      {{ vals }}
    </div>
    <div class="input-ext" v-if="showDrop">
      <div class="item" v-for="(item, index) in list" :key="index" @mousedown="chose(item)">
        {{item.ext}}{{item.name}}
      </div>
    </div>
  </div>
</template>
<script setup>
// 文本输入框
import tool from '@/utils/tool'
// import {  IconMore } from '@opentiny/vue-icon'
import {TinyInput} from "@opentiny/vue";
import {ref, computed, onMounted,} from 'vue'
const props = defineProps({
  modelValue: { type: [Number, String], default: '' },
  placeholder: { type: [Number, String], default: '' },
  invId: {type: [String, Number], default: ''},
  buId: {type: [String, Number], default: ''},
  transType: {type: [String, Number], default: ''},
  unit: {type: [String, Number], default: ''},
  cat: {type: String, default: ''}, // 取数据cat分类
  height: { type: [Number, String], default: '' },
  width: { type: [Number, String], default: '' },
  type: { type: [Number, String], default: 'text' },
  size: { type: [Number, String], default: 'small' },
  maxlength: { type: Number, default: null },
  minlength: { type: Number, default: null },
  rows: { type: Number, default: null },
  clearable: { type: Boolean, default: false },
  inject: { type: Boolean, default: false },
  autofocus: { type: Boolean, default: false },
  autoSelect: { type: Boolean, default: false },
  readonly: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  showMore: { type: Boolean, default: false },
  int: { type: Boolean, default: false },
  money: { type: Boolean, default: false },
  price: { type: Boolean, default: false },
  float: { type: Boolean, default: false },
  digit: { type: Number, default: 0 },
  hasDrop: { type: Boolean, default: false },
  showPassword: { type: Boolean, default: false },
  noborder: { type: Boolean, default: false },
  borderBottom: { type: Boolean, default: false },
})
const emit = defineEmits(['enter', 'left', 'down', 'up', 'right', 'clickMore','input'])
const vals = defineModel()
const showDrop = ref(false)
const nobd = ref(false)
const list = ref([])
const ltextRef = ref()
const fApi = ref({})
const blur = () => {
  if(props.hasDrop)
    showDrop.value = false
  if(vals.value) {
    if(props.int) {
      vals.value = tool.xe.toFixed(vals.value, 0)
    }
    else if(props.money) {
      vals.value = tool.xe.toFixed(vals.value, 2)
    }
    else if(props.float) {
      vals.value = tool.xe.toFixed(vals.value, props.digit)
    }
  }
}
const toFocus = () => {
  if(props.hasDrop && props.cat) {
    tool.post('common/dropdown', {cat: props.cat, buId: props.buId, invId: props.invId, unit: props.unit,transType: props.transType}).then(ret => {
      if(ret.stat) {
        list.value = ret.data
        if(list.value.length > 0)
          showDrop.value = true
      }
    })
  }
  if(props.autoSelect) {
    ltextRef.value.select()
  }
  else {
    if(props.int || props.float|| props.money)
      ltextRef.value.select()
  }
}
const clear = () => {
  vals.value = ''
}
const chose = (item) => {
  vals.value = item.name
}
const change = (value) => {
  if(props.int || props.float || props.money) {
    if(value) {
      let val = value
      if(props.digit) {
        if(props.float) {
          val = tool.xe.round(value, props.digit)
        }
        if(props.money) {
          val = tool.xe.toFixed(value, props.digit)
        }
      }
      else {
        val = tool.xe.toNumber(value)
      }
      vals.value = val
    }
  }
  else {
    vals.value = tool.xe.trim(value)
  }
}
const focus = () => {ltextRef.value.focus()}
const keydownEvent = (e) => {
  if(e.key) {
    let key = e.key ? e.key : e.$event.key
    let start = e.target.selectionStart // 光标位置
    if(key === 'Enter') {
      doEmit('enter')
    }
    else if(key === 'ArrowLeft') {
      if(start === 0) {
        emit('left')
      }
    }
    else if(key === 'ArrowRight') {
      if(start === (vals.value?tool.xe.toString(vals.value).length:0)) {
        emit('right')
      }
    }
    else if(key === 'ArrowDown') {
      emit('down')
    }
    else if(key === 'ArrowUp') {
      emit('up')
    }
    else if(key === 'Escape') {
       blur()
    }
    else {
      if(['F1','F2','F3','F4','F5','F6','F7','F8','F9','F10','F11','F12'].indexOf(key) !== -1)
        ltextRef.value.blur()
        // e.preventDefault()
        // e.stopImmediatePropagation()
    }
  }
}
const clickMore = () => {emit('clickMore')}

const doEmit = (event, val = null) => {
  setTimeout(() => {
    if(props.inject) {
      emit(event, fApi.value, val);
    }
    else {
      emit(event, val);
    }
  }, 1)
}

const inputStyle = computed(() => {
  return {
    height: props.height ? (typeof props.height === 'number' ? (props.height+'px'):props.height) :'',
    textAlign: (props.float || props.money || props.int) ? 'right' :'left',
  }
})
const setApi = (api) => {
  fApi.value = api
}

defineExpose({focus, setApi})
</script>
<style scoped lang="scss">
.readonly {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  height: 28px;
  line-height: 28px;
  color: #2b85e4;
}
.money {
  color: red !important;
  :deep(input[type=text]) {
    color: red !important;
  }
}

</style>